@import url(fontawesome/fontawesome.css);

@media print {
  html {
    background-color: transparent;
    overflow: hidden;
  }

  body {
    margin: 0;
  }
}
html {
  /* 定义背景色 */
  var(bg-primary): #409EFF;
  var(bg-success): #67C23A;
  var(bg-warning):#E6A23C;
  var(bg-danger):#F56C6C;
  var(bg-info):#909399;
  var(bg-black):#000000;
  var(bg-white):#ffffff; 
  
  /* 定义文字色 */
  var(text-primary): #303133;
  var(text-regular): #606266;
  var(text-secondary):#909399;
  var(text-placeholder):#C0C4CC;
  /* 定义边框色 */
  var(border-base): #DCDFE6;
  var(border-light): #E4E7ED;
  var(border-lighter):#EBEEF5;
  var(border-extralight):#F2F6FC;
}
/* layout */
div.row{
  position: relative;
  box-sizing: border-box;
  /* sciter flow */
  flow:horizontal-wrap;
}
div.v-row{
  position: relative;
  box-sizing: border-box;
  /* sciter flow */
  flow:vertical-wrap;
}
div.v-row div.v-row-x{
  overflow-x:scroll-indicator;  
}
div.v-row div.v-row-y{
  overflow-y:scroll-indicator;  
}
div.col{
  width:100%;
}
div.col div.col-0 {
  display: none;
  width: 0
}
div.col div.col-1 {
  width: 4.16667%
}
div.col div.col-2 {
  width: 8.33333%
}
div.col div.col-3 {
  width: 12.5%
}
div.col div.col-4{
  width: 16.66667%;
}
div.col div.col--5 {
  width: 20.83333%
}
div.col div.col--6 {
  width: 25%
}
div.col div.col--7 {
  width: 29.16667%
}
div.col div.col-8{
  width: 33.33333%;
}
div.col div.col--9 {
  width: 37.5%
}
div.col div.col--10 {
  width: 41.66667%
}
div.col div.col--11 {
  width: 45.83333%
}
div.col div.col-12{
  width:50%
}
div.col div.col--13 {
  width: 54.16667%
}
div.col div.col--14 {
  width: 58.33333%
}
div.col div.col--15 {
  width: 62.5%
}
div.col div.col--16 {
  width: 66.66667%
}
div.col div.col--17 {
  width: 70.83333%
}
div.col div.col--18 {
  width: 75%
}
div.col div.col--19 {
  width: 79.16667%
}
div.col div.col--20 {
  width: 83.33333%
}
div.col div.col--21 {
  width: 87.5%
}
div.col div.col--22 {
  width: 91.66667%
}
div.col div.col--23 {
  width: 95.83333%
}
div.col div.col-24{
  width:100%
}






div.[class*=col-] {
  float: left;
  box-sizing: border-box;
}
/* text button */

@set std-button < std-button-base {
  :root {
    appearance: auto;
    margin: 0;
    padding: 0.5em 1em;
    behavior: button;
    white-space: nowrap;
    cursor: default;
    text-align: center;
    content-vertical-align: middle;

  }

  /* 按钮 */
  /* 
:root.btn {
  color: color(button-text);
  background: color(button-face);
  box-shadow: #888 1dip 1dip 1dip;
  appearance: auto;
  writing-mode: horizontal-tb !important;
  text-rendering: auto;
  letter-spacing: normal;
  word-spacing: normal;
  line-height: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  display: inline-block;
  text-align: center;
  align-items: flex-start;
  box-sizing: border-box;
  background-color: buttonface;
  margin: 0em;
  padding: 1px 6px;
  border-width: 2px;
  border-style: outset;
  border-color: buttonborder;
  border-image: initial;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  text-transform: none;
  overflow: visible;
  margin: 0;
  font: inherit;
  color: inherit;
  box-sizing: border-box;


} */

  :root.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;

  }
  :root:not(:disabled).btn-default {
    background-color: #fcfdfe;
    border-color: #ebebeb;
    color: #8b95a5;
  }
  :root.btn-default:disabled,:root.btn-default.disabled
   {
    color: #c0c4cc;
    cursor: not-allowed;
    background-image: none;
    background-color: #fff;
    border-color: #ebeef5;
  }
  /* :root.btn-default {
    background-color: #fcfdfe;
    border-color: #ebebeb;
    color: #8b95a5;
  } */


  :root.btn-default:active {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
  }

  :root.btn-default:focus {
    background-color: #f9fafb !important;
    border-color: #ebebeb !important;
    color: #4d5259;
  }

  :root.btn-default:hover {
    background-color: #f9fafb;
    border-color: #ebebeb;
    color: #4d5259;
  }

  :root.btn-default:not([disabled]):not(.disabled).active,
  :root.btn-default:not([disabled]):not(.disabled):active,
  .show>.btn-default.dropdown-toggle {
    background-color: #f9fafb !important;
    border-color: #ebebeb !important;
    color: #4d5259;
    -webkit-box-shadow: none;
    box-shadow: none;
  }

  /* primary button */
  :root.btn-primary {
    background-color: #33cabb;
    border-color: #33cabb;
    color: #fff !important;
  }

  /* active */
  :root.btn-primary:not([disabled]):not(.disabled).active,
  :root.btn-primary:not([disabled]):not(.disabled):active,
  .show>.btn-primary.dropdown-toggle {
    background-color: #2ba99d !important;
    border-color: #2ba99d !important;
    -webkit-box-shadow: none;
    box-shadow: none;
  }

  /* hover */
  :root.btn-primary:hover {
    background-color: #52d3c7;
    border-color: #52d3c7;
  }

  /* focus */
  :root.btn-primary:focus,
  :root.btn-primary.active,
  .open>.dropdown-toggle:root.btn-primary {
    background-color: #52d3c7 !important;
    border-color: #52d3c7 !important;
  }
  :root.btn-primary:disabled,:root.btn-primary.disabled
   {
    color: #52d3c7;
    cursor: not-allowed;
    background-image: none;
    background-color: #53f0ff;
    border-color: #ebeef5;
  }
  /* success button */
  :root.btn-success {
    background-color: #15c377;
    border-color: #15c377;
    color: #fff !important;
  }

  /* active */
  :root.btn-success:not([disabled]):not(.disabled).active,
  :root.btn-success:not([disabled]):not(.disabled):active,
  .show>.btn-success.dropdown-toggle {
    background-color: #14b56f !important;
    border-color: #14b56f !important;
    -webkit-box-shadow: none;
    box-shadow: none;
  }

  /* hover */
  :root.btn-success:hover {
    background-color: #16d17f;
    border-color: #16d17f;
  }

  /* focus */
  :root.btn-success:focus,
  :root.btn-success.active,
  .open>.dropdown-toggle.btn-success {
    background-color: #16d17f !important;
    border-color: #16d17f !important;
  }
  :root.btn-success:disabled,:root.btn-success.disabled
   {
    color: #52d3c7;
    cursor: not-allowed;
    background-image: none;
    background-color: #28f099;
    border-color: #ebeef5;
  }
  /* info */
  :root.btn-info {
    background-color: #48b0f7;
    border-color: #48b0f7;
    color: #fff !important;
  }

  /* active */
  :root.btn-info:not([disabled]):not(.disabled).active,
  :root.btn-info:not([disabled]):not(.disabled):active,
  .show>.btn-info.dropdown-toggle {
    background-color: #2ba3f6 !important;
    border-color: #2ba3f6 !important;
    -webkit-box-shadow: none;
    box-shadow: none;
  }

  /* hover */
  :root.btn-info:hover {
    background-color: #65bdf8;
    border-color: #65bdf8;
  }

  /* focus */
  :root.btn-info:focus,
  :root.btn-info.active,
  .open>.dropdown-toggle.btn-info {
    background-color: #65bdf8 !important;
    border-color: #65bdf8 !important;
  }

  /* warning button */
  :root.btn-warning {
    background-color: #faa64b;
    border-color: #faa64b;
    color: #fff !important;
  }

  /* active */
  :root.btn-warning:not([disabled]):not(.disabled).active,
  :root.btn-warning:not([disabled]):not(.disabled):active,
  .show>.btn-warning.dropdown-toggle {
    background-color: #f99a32 !important;
    border-color: #f99a32 !important;
    -webkit-box-shadow: none;
    box-shadow: none;
  }

  /* hover */
  :root.btn-warning:hover {
    background-color: #fbb264;
    border-color: #fbb264;
  }

  /* focus */
  :root.btn-warning:focus,
  :root.btn-warning.active,
  .open>.dropdown-toggle.btn-warning {
    background-color: #fbb264 !important;
    border-color: #fbb264 !important;
  }

  /* danger button */
  :root.btn-danger {
    background-color: #f96868;
    border-color: #f96868;
    color: #fff !important;
  }

  /* active */
  :root.btn-danger:not([disabled]):not(.disabled).active,
  :root.btn-danger:not([disabled]):not(.disabled):active,
  :root.show>.btn-danger.dropdown-toggle {
    background-color: #f84f4f !important;
    border-color: #f84f4f !important;
    -webkit-box-shadow: none;
    box-shadow: none;
  }

  /* hover */
  :root.btn-danger:hover {
    background-color: #fa8181;
    border-color: #fa8181;
  }

  /* focus */
  :root.btn-danger.focus,
  :root.btn-danger.active,
  .open>.dropdown-toggle.btn-danger {
    background-color: #fa8181 !important;
    border-color: #fa8181 !important;
  }

  /* secondary button */
  :root.btn-secondary {
    color: #4d5259 !important;
    background-color: #e4e7ea;
    border-color: #e4e7ea;
  }

  /* active */
  :root.btn-secondary:not([disabled]):not(.disabled).active,
  :root.btn-secondary:not([disabled]):not(.disabled):active,
  .show>.btn-secondary.dropdown-toggle {
    background-color: #dbdfe3 !important;
    border-color: #dbdfe3 !important;
    -webkit-box-shadow: none;
    box-shadow: none;
  }

  /* hover */
  :root.btn-secondary:hover {
    background-color: #edeff1;
    border-color: #edeff1;
  }

  /* focus */
  :root.btn-secondary:focus,
  :root.btn-secondary.active,
  .open>.dropdown-toggle.btn-secondary {
    background-color: #edeff1 !important;
    border-color: #edeff1 !important;
  }

  /* dark button */
  :root.btn-dark {
    background-color: #465161;
    border-color: #465161;
    color: #fff !important;
  }

  /* active */
  :root.btn-dark:not([disabled]):not(.disabled).active,
  :root.btn-dark:not([disabled]):not(.disabled):active,
  .show>.btn-dark.dropdown-toggle {
    background-color: #3b4552 !important;
    border-color: #3b4552 !important;
    -webkit-box-shadow: none;
    box-shadow: none;
  }

  /* hover */
  :root.btn-dark:hover {
    background-color: #515d70;
    border-color: #515d70;
  }

  /* focus */
  :root.btn-dark.focus,
  :root.btn-dark:active,
  .open>.dropdown-toggle.btn-dark {
    background-color: #515d70 !important;
    border-color: #515d70 !important;
  }

  /* purple button */
  :root.btn-purple {
    background-color: #926dde;
    border-color: #926dde;
    color: #fff !important;
  }

  /* active */
  :root.btn-purple:not([disabled]):not(.disabled).active,
  :root.btn-purple:not([disabled]):not(.disabled):active,
  .show>.btn-purple.dropdown-toggle {
    background-color: #8258d9 !important;
    border-color: #8258d9 !important;
    -webkit-box-shadow: none;
    box-shadow: none;
  }

  /* hover */
  :root.btn-purple:hover {
    background-color: #a282e3;
    border-color: #a282e3;
  }

  /* focus */
  :root.btn-purple:focus,
  :root.btn-purple.active,
  .open>.dropdown-toggle.btn-purple {
    background-color: #a282e3 !important;
    border-color: #a282e3 !important;
  }

  /* pink button */
  :root.btn-pink {
    background-color: #f96197;
    border-color: #f96197;
    color: #fff !important;
  }

  /* active */
  :root.btn-pink:not([disabled]):not(.disabled).active,
  :root.btn-pink:not([disabled]):not(.disabled):active,
  .show>.btn-pink.dropdown-toggle {
    background-color: #f84d8a !important;
    border-color: #f84d8a !important;
    -webkit-box-shadow: none;
    box-shadow: none;
  }

  /* hover */
  :root.btn-pink:hover {
    background-color: #fa75a4;
    border-color: #fa75a4;
  }

  /* focus */
  :root.btn-pink.focus,
  :root.btn-pink.active,
  .open>.dropdown-toggle.btn-pink {
    background-color: #fa75a4 !important;
    border-color: #fa75a4 !important;
  }

  /* cyan button */
  :root.btn-cyan {
    background-color: #57c7d4;
    border-color: #57c7d4;
    color: #fff !important;
  }

  /* active */
  :root.btn-cyan:not([disabled]):not(.disabled).active,
  :root.btn-cyan:not([disabled]):not(.disabled):active,
  .show>.btn-cyan.dropdown-toggle {
    background-color: #37bccc !important;
    border-color: #37bccc !important;
    -webkit-box-shadow: none;
    box-shadow: none;
  }

  /* hover */
  :root.btn-cyan:hover {
    background-color: #77d2dc;
    border-color: #77d2dc;
  }

  /* focus */
  :root.btn-cyan.focus,
  :root.btn-cyan.active,
  .open>.dropdown-toggle.btn-cyan {
    background-color: #77d2dc !important;
    border-color: #77d2dc !important;
  }

  /* yellow button */
  :root.btn-yellow {
    background-color: #fcc525;
    border-color: #fcc525;
    color: #fff !important;
  }

  /* active */
  :root.btn-yellow:not([disabled]):not(.disabled).active,
  :root.btn-yellow:not([disabled]):not(.disabled):active,
  .show>.btn-yellow.dropdown-toggle {
    background-color: #f5b703 !important;
    border-color: #f5b703 !important;
    -webkit-box-shadow: none;
    box-shadow: none;
  }

  /* hover */
  :root.btn-yellow:hover {
    background-color: #fdd04d;
    border-color: #fdd04d;
  }

  /* focus */
  :root.btn-yellow:focus,
  :root.btn-yellow:active,
  .open>.dropdown-toggle.btn-yellow {
    background-color: #fdd04d !important;
    border-color: #fdd04d !important;
  }

  /* brown button */
  :root.btn-brown {
    background-color: #8d6658;
    border-color: #8d6658;
    color: #fff !important;
  }

  /* active */
  :root.btn-brown:not([disabled]):not(.disabled).active,
  :root.btn-brown:not([disabled]):not(.disabled):active,
  .show>.btn-brown.dropdown-toggle {
    background-color: #7d5b4e !important;
    border-color: #7d5b4e !important;
    -webkit-box-shadow: none;
    box-shadow: none;
  }

  /* hover */
  :root.btn-brown:hover {
    background-color: #9d7162;
    border-color: #9d7162;
  }

  /* focus */
  :root.btn-brown:focus,
  :root.btn-brown:active,
  .open>.dropdown-toggle.btn-brown {
    background-color: #8d6658 !important;
    border-color: #8d6658 !important;
  }

  /* link button */
  :root.btn-link {
    color: #48b0f7;
    background-color: transparent;
    border-color: transparent;
  }

  /* active */
  :root.btn:focus,
  :root.btn.active {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
  }

  /* hover */
  :root.btn-link:focus {
    text-decoration: none;
    color: #e4e7ea;
  }

  /* focus */
  :root.btn-link:focus {
    text-decoration: none;
    color: #e4e7ea;
  }

  /* btn-disabled */
  :root.btn-disabled {
    color: #c0c4cc;
    cursor: not-allowed;
    background-image: none;
    background-color: #fff;
    border-color: #ebeef5;
  }
  :root:disabled {
    cursor: wait;
    
  }
  /* btn-round */
  :root.btn-round {
    border-radius: 10rem;
  }

  /* icon button */
  :root.btn-label {
    position: relative;
    padding-left: 52px;
    overflow: hidden;
  }

  :root.btn-label>label {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 36px;
    line-height: 2;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: rgba(0, 0, 0, 0.1);
    cursor: pointer;
    margin-bottom: 0;
  }

  :root.btn-label>label>i {
    font-size: 16px;
  }

  :root.btn-w-xs {
    width: 80px
  }

  :root.btn-w-sm {
    width: 100px
  }

  :root.btn-w-md {
    width: 120px;
  }

  :root.btn-w-lg {
    width: 145px
  }

  :root.btn-w-xl {
    width: 180px
  }

  :root.btn-group-lg>.btn,
  :root.btn-lg {
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 6px
  }

  :root.btn-group-sm>.btn,
  :root.btn-sm {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px
  }

  :root.btn-group-xs>.btn,
  :root.btn-xs {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px
  }

  :root.btn-block {
    display: block;
    width: 100%
  }

  :root.btn-block+.btn-block {
    margin-top: 5px
  }


}

.text-color {
  color: blueviolet;
}

/* button reset */
/* button {
    appearance: auto;
        writing-mode: horizontal-tb !important;
        font-style: ;
        font-variant-ligatures: ;
        font-variant-caps: ;
        font-variant-numeric: ;
        font-variant-east-asian: ;
        font-weight: ;
        font-stretch: ;
        font-size: ;
        font-family: ;
        text-rendering: auto;
        color: buttontext;
        letter-spacing: normal;
        word-spacing: normal;
        line-height: normal;
        text-transform: none;
        text-indent: 0px;
        text-shadow: none;
        display: inline-block;
        text-align: center;
        align-items: flex-start;
        cursor: default;
        box-sizing: border-box;
        background-color: buttonface;
        margin: 0em;
        padding: 1px 6px;
        border-width: 2px;
        border-style: outset;
        border-color: buttonborder;
        border-image: initial;
} */
/* @import url(pui.css); */